<style scoped lang="scss">
.box {
  width: 100%;
  height: 100%;
  background: #007bf7;
  .tu {
    width: 100%;
    height: 200px;
  }
  .header {
    width: 95%;
    height: 150px;
    background: #fff;
    border-radius: 10px;
    border: 3px solid #007bf7;
    margin-left: 10px;
    margin-top: 5px;
    .title {
      width: 130px;
      height: 40px;
      border-radius: 20px;
      background: linear-gradient(to right, #f5c300, #ff7700);
      text-align: center;
      line-height: 40px;
      color: #fff;
      margin: 10px 0 0 110px;
      font-size: 20px;
    }
    .p1 {
      margin-left: 10px;
      margin-top: 10px;
    }
  }
  .middle {
    width: 95%;
    height: 780px;
    background: #fff;
    border-radius: 10px;
    border: 3px solid #007bf7;
    margin-left: 10px;
    margin-top: 5px;
    .title {
      width: 130px;
      height: 40px;
      border-radius: 20px;
      background: linear-gradient(to right, #f5c300, #ff7700);
      text-align: center;
      line-height: 40px;
      color: #fff;
      margin: 10px 0 0 110px;
      font-size: 20px;
    }
    .text {
      width: 95%;
      background: #ebf5fe;
      height: 90px;
      margin-left: 10px;
      margin-top: 10px;
      border-radius: 10px;
      display: flex;
      .top {
        width: 75%;
        justify-content: space-around;
        .xi {
          margin: 10px 0 0 10px;
<<<<<<< HEAD
          font-weight: 600;
          font-size: 16px;
=======
>>>>>>> refs/remotes/origin/master
        }
        .p2 {
          font-size: 14px;
          color: #ccc;
          margin: 5px 0 0 10px;
        }
      }
      .butt {
        height: 100%;
        line-height: 100px;
        margin-left: 10px;
      }
      .btn {
        display: inline-block;
        width: 70px;
        height: 30px;
        line-height: 30px;
        border-radius: 20px;
        text-align: center;
        color: #fff;
        background: linear-gradient(to right, #4887ff, #925aff);
      }
    }
  }
  .bottom {
<<<<<<< HEAD
      width: 95%;
      height: 500px;
      background: #fff;
      border-radius: 10px;
      border: 3px solid #007bf7;
      margin-left: 10px;
      margin-top: 5px;
      .title {
=======
    width: 95%;
    height: 500px;
    background: #fff;
    border-radius: 10px;
    border: 3px solid #007bf7;
    margin-left: 10px;
    margin-top: 5px;
    .title {
>>>>>>> refs/remotes/origin/master
      width: 130px;
      height: 40px;
      border-radius: 20px;
      background: linear-gradient(to right, #f5c300, #ff7700);
      text-align: center;
      line-height: 40px;
      color: #fff;
      margin: 10px 0 0 110px;
      font-size: 20px;
    }
<<<<<<< HEAD
    .subject{
        margin: 10px 0 0 0px;
        width: 100%;
        height: 400px;
        display: flex;
        flex-wrap: wrap;
        .ke1{
            width: 168px;
            background: #ebf5fe;
            height: 90px;
            margin: 10px 0 0 5px;
            border-radius: 5px;
            font-weight: 600;
            .title1{
                margin: 5px 0 0 10px;
                font-weight: 700;
                font-size: 18px;
            }
            .p2{
                margin: 5px 0 0 10px;
                font-size: 13px;
                font-weight: normal;
                color: #a2a9b0;
            }
        }
    }
    }
    .dibu{
        width: 100%;
        height: 50px;
        margin-top: 20px;
        color: #ccc;
        text-align: center;
        font-size: 14px;
    }
=======
    .subject {
      margin: 10px 0 0 0px;
      width: 100%;
      height: 400px;
      display: flex;
      flex-wrap: wrap;
      .ke1 {
        width: 168px;
        background: #ebf5fe;
        height: 90px;
        margin: 10px 0 0 5px;
        border-radius: 5px;
        .title1 {
          margin: 5px 0 0 10px;
        }
        .p2 {
          margin: 5px 0 0 10px;
          font-size: 14px;
        }
      }
    }
  }
  .dibu {
    width: 100%;
    height: 50px;
    margin-top: 20px;
    color: #ccc;
    text-align: center;
    font-size: 14px;
  }
>>>>>>> refs/remotes/origin/master
}
</style>
<template>
  <div class="box">
    <img src="../../img/linchuang.jpg" alt="" class="tu" />
    <!-- 上面 -->
    <div class="header">
      <h2 class="title">项目介绍</h2>
      <p class="p1">
        招募项目均为国内正在临床进行中的新药实验,均可在国家临床试验公式平台查询到批准实验即可。
      </p>
    </div>
    <!-- 中间 -->
    <div class="middle">
      <h2 class="title">热门项目</h2>
      <div class="text">
        <div class="top">
          <h3 class="xi">系统性红斑狼疮</h3>
          <p class="p2">有机会参加欧洲已上市药物在中国的临床研究项目</p>
        </div>
        <div class="butt">
          <span class="btn">去申请</span>
        </div>
      </div>

      <div class="text">
        <div class="top">
          <h3 class="xi">强直性脊柱炎</h3>
          <p class="p2">既往使用过生物制剂也有机会参加筛选入组用药</p>
        </div>
        <div class="butt">
          <span class="btn">去申请</span>
        </div>
      </div>

      <div class="text">
        <div class="top">
          <h3 class="xi">高血脂</h3>
          <p class="p2">创新型生物制剂重组全人源抗PCSK9单克隆抗体</p>
        </div>
        <div class="butt">
          <span class="btn">去申请</span>
        </div>
      </div>

      <div class="text">
        <div class="top">
          <h3 class="xi">糖尿病</h3>
          <p class="p2">目前最火的GLP-1类药物,治疗||型糖尿病</p>
        </div>
        <div class="butt">
          <span class="btn">去申请</span>
        </div>
      </div>

      <div class="text">
        <div class="top">
          <h3 class="xi">非小细胞肺癌</h3>
<<<<<<< HEAD
          <p class="p2">
            全球同步在研明星药物,该药物已获得FDA批准用于治疗乳腺癌患者
          </p>
=======
          <p class="p2">全球同步在研明星药物,该药物已获得FDA批准用于治疗乳腺癌患者</p>
>>>>>>> refs/remotes/origin/master
        </div>
        <div class="butt">
          <span class="btn">去申请</span>
        </div>
      </div>

      <div class="text">
        <div class="top">
          <h3 class="xi">乳腺癌</h3>
          <p class="p2">用于治疗HER2(-)晚期或转移性乳腺癌</p>
        </div>
        <div class="butt">
          <span class="btn">去申请</span>
        </div>
      </div>

      <div class="text">
        <div class="top">
          <h3 class="xi">胃癌</h3>
          <p class="p2">抗体偶联药物ADC,中国已获批用于治疗HER2(+)乳腺癌患者</p>
        </div>
        <div class="butt">
          <span class="btn">去申请</span>
        </div>
      </div>
    </div>
    <!-- 下面 -->
    <div class="bottom">
      <h2 class="title">项目合集</h2>
      <div class="subject">
        <div class="ke1">
<<<<<<< HEAD
            <h1 class="title1">皮肤科项目</h1>
            <p class="p2">银屑病、特应性皮炎、白癜风</p>
        </div>
        <div class="ke1">
            <h1 class="title1">三高慢病项目</h1>
            <p class="p2">高血脂、肝硬化、心衰、慢性肾炎等</p>
        </div>
        <div class="ke1">
            <h1 class="title1">肿瘤项目</h1>
            <p class="p2">肺癌、肝癌、食管癌、前列腺癌、甲状腺癌、宫颈癌等</p>
        </div>
        <div class="ke1">
            <h1 class="title1">血液疾病项目</h1>
            <p class="p2">白血病、淋巴瘤、骨髓瘤等</p>
        </div>
        <div class="ke1">
            <h1 class="title1">神经内科项目</h1>
            <p class="p2">阿尔兹海默症、帕金森、癫痫等</p>
        </div>
        <div class="ke1">
            <h1 class="title1">呼吸系统项目</h1>
            <p class="p2">哮喘、肺纤维化、慢阻肺、慢性咳嗽等</p>
        </div>
        <div class="ke1">
            <h1 class="title1">消化系统项目</h1>
            <p class="p2">溃肠性结肠炎、克罗恩病等</p>
        </div>
        <div class="ke1">
            <h1 class="title1">风湿免疫系统项目</h1>
            <p class="p2">银屑病关节炎、系统性红斑狼疮、强直性脊柱炎、类风湿性关节炎等</p>
=======
          <h1 class="title1">皮肤科项目</h1>
          <p class="p2">银屑病、特应性皮炎、白癜风</p>
        </div>
        <div class="ke1">
          <h1 class="title1">三高慢病项目</h1>
          <p class="p2">高血脂、肝硬化、心衰、慢性肾炎等</p>
        </div>
        <div class="ke1">
          <h1 class="title1">肿瘤项目</h1>
          <p class="p2">肺癌、肝癌、食管癌、前列腺癌、甲状腺癌、宫颈癌等</p>
        </div>
        <div class="ke1">
          <h1 class="title1">血液疾病项目</h1>
          <p class="p2">白血病、淋巴瘤、骨髓瘤等</p>
        </div>
        <div class="ke1">
          <h1 class="title1">神经内科项目</h1>
          <p class="p2">阿尔兹海默症、帕金森、癫痫等</p>
        </div>
        <div class="ke1">
          <h1 class="title1">呼吸系统项目</h1>
          <p class="p2">哮喘、肺纤维化、慢阻肺、慢性咳嗽等</p>
        </div>
        <div class="ke1">
          <h1 class="title1">消化系统项目</h1>
          <p class="p2">溃肠性结肠炎、克罗恩病等</p>
        </div>
        <div class="ke1">
          <h1 class="title1">风湿免疫系统项目</h1>
          <p class="p2">银屑病关节炎、系统性红斑狼疮、强直性脊柱炎、类风湿性关节炎等</p>
>>>>>>> refs/remotes/origin/master
        </div>
      </div>
    </div>

    <p class="dibu">本服务由北京厚普医疗科技有限公司提供</p>
  </div>
</template>

<<<<<<< HEAD
<script setup lang="ts">
</script>
=======
<script setup lang="ts"></script>
>>>>>>> refs/remotes/origin/master
